<template>
  <a-modal
    title="编辑自定义编号规则"
    width="80%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :md="14" :sm="24">
            <a-form-item
              label="表名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input ref="tableReName" readOnly style="width: 100%;border:0" v-decorator="['tableReName']" />
            </a-form-item>
          </a-col>
          <a-col :md="10" :sm="24">
            <a-form-item
              label="自定义编码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input placeholder="请输入自定义编码" v-decorator="['encode']" :allowClear="allowClear" :maxLength="maxlength"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="14" :sm="24">
            <a-form-item
              label="时间选项"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-radio-group
                placeholder="请选择时间选项"
                v-decorator="['timeFormat',{rules: [{ required: true, message: '请选择时间选项！' }]}]">
                <a-radio v-for="(item,index) in timeFormatData" :key="index" :value="item.code">{{
                  item.name
                }}
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :md="10" :sm="24">
            <a-form-item
              label="流水号位数"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input-number
                placeholder="请输入流水号位数"
                style="width: 100%"
                v-decorator="['serialNum', {rules: [{required: true, message: '请输入流水号位数！'}]}]"
                :max="6"
                :min="1"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="14" :sm="24">
            <a-form-item
              label="自由字段"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input
                placeholder="请输入自由字段"
                v-decorator="['freeField']"
                :allowClear="allowClear"
                :maxLength="maxlength"/>
            </a-form-item>
          </a-col>
          <a-col :md="10" :sm="24">
            <a-form-item
              v-show="false"
              label="目标表单名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                style="width: 100%"
                placeholder="请选择目标表单名称"
                v-decorator="['tableName', {rules: [{ required: true, message: '请选择目标表单名称！' }]}]"
                disabled>
                <a-select-option v-for="(item,index) in tableNameData" :key="index" :value="item.code">{{
                  item.name
                }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item v-show="false">
          <a-input v-decorator="['id']"/>
        </a-form-item>
      </a-form>
      <a-input
        readOnly
        class="format"
        :value="getFormat()"
        addon-before="规则示例:"
        placeholder="规则示例"/>
    </a-spin>
  </a-modal>
</template>

<script>
import { customCodeEdit, customCodeInformationList } from '@/api/modular/main/customcode/customCodeManage'
import getFormat from '@/views/main/customcode/index.vue'

export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      timeFormatData: [],
      tableNameData: [],
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      maxlength: 6,
      allowClear: true,
      value: 2,
      tableReName: ''
    }
  },
  methods: {
    // 初始化方法
    edit(record) {
      this.visible = true
      this.timeFormatData = [
        {
          name: '年',
          code: 0
        },
        {
          name: '年月',
          code: 1
        },
        {
          name: '年月日',
          code: 2
        },
        {
          name: '无',
          code: 3
        }
      ]
      customCodeInformationList().then((res) => {
        this.tableNameData = res.data
      })
      setTimeout(() => {
        this.form.setFieldsValue(
          {
            encode: record.encode,
            timeFormat: record.timeFormat,
            serialNum: record.serialNum,
            tableName: record.tableName,
            tableReName: record.tableReName,
            id: record.id,
            freeField: record.freeField
          }
        )
      }, 100)
    },
    handleSubmit() {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          for (const key in values) {
            if (typeof (values[key]) === 'object' && values[key] != null) {
              values[key] = JSON.stringify(values[key])
            }
          }
          customCodeEdit(values).then((res) => {
            if (res.success) {
              this.$message.success('编辑成功')
              this.confirmLoading = false
              this.$emit('ok', values)
              this.handleCancel()
            } else {
              this.$message.error('编辑失败')//  + res.message
              this.visible = false
            }
          }).finally((res) => {
            this.confirmLoading = false
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },
    getFormat() {
      return getFormat.methods.getFormat(this.form.getFieldsValue())
    }
  }
}
</script>
<style lang="less" scoped>
.format {
  width: 70%;
  margin-left: 15%;
}
</style>
